<template>
    <view class="page">
        <view>
            <view class="back_big_box">
                <view style="height: 88rpx;"></view>
                <view class="title_icon_box">
                    <view class="back_icon">
                        <u-icon v-if="mark == 1" @click="gohome" name="home-fill" size="50"></u-icon>
                        <u-icon v-else @click="goback" name="arrow-left" size="50"></u-icon>
                    </view>
                    <view class="back_title_box">订单详情
                    </view>
                </view>
            </view>
        </view>

        <!-- 订单选择 -->
        <view class="subsection_box">
            <view class="sub_text_box" :class="subId == item.id ? 'sub_text_boxact' : ''"
                v-for="(item, index) in subList" :key="index" @click="subBtn(item)">
                <view class="wenzi" :class="'wenzi_' + item.id">{{ item.text }}
                    <view class="sub_line" :class="'sub_line_' + item.id" v-if="subId == item.id"></view>
                </view>

            </view>

        </view>

        <!-- 订单列表 -->
        <scroll-view scroll-y class="order_big_box" v-if="orderList.length > 0" @scrolltolower="lower()">
            <view class="dange_order_box" v-for="(item, index) in orderList" :key="index">
                <view class="orderNum_box">
                    <view class="left_lv_box"></view>
                    <view class="zs_order_num_box">订单编号：{{ item.first_order_sn }}</view>
                </view>

                <view class="zc_type_box">
                    <view class="le_box">
                        <view class="cc_box">
                            <image :src="item.product_img" mode="scaleToFill" />
                        </view>
                        <view class="xx_box">
                            <view class="xx_top_box">{{ item.product_name }}</view>
                            <view class="xx_bot_box">
                                按{{ item.category_name }}拉
                                <view v-if="item.position_name"
                                    style="width: 8rpx;height: 8rpx;margin: 0 6rpx; border-radius: 50%;background-color: rgba(204, 204, 204, 1);">
                                </view>
                                <text v-if="item.position_name">
                                    {{ item.position_name }}
                                </text>
                            </view>
                        </view>
                    </view>
                    <view class="r_box">
                        <view class="daishu_box">
                            <text style="color:rgba(255, 141, 26, 1);font-size: 20rpx;">¥</text>
                            <text style="font-weight: 700;color:rgba(255, 141, 26, 1);font-size: 36rpx;">{{
                            item.product_price }}</text>
                            /{{ item.category_name }}
                        </view>
                        <view class="yg_box">预估{{ item.num * 1 }}{{ item.category_name }}</view>
                    </view>
                </view>

                <view class="zclx_box">
                    <view class="xing_box">
                        <text style="margin-right: 14rpx;">{{ item.real_name }}</text> <text>{{ item.phone }}</text>
                    </view>
                    <view class="xing_box">
                        <text style="margin-right: 14rpx;">时间：</text> <text>{{ item.appointment_time }}</text>
                    </view>
                    <view class="dizhi_box">
                        <view>地址：</view>
                        <view class="jt_box">{{ item.location }}</view>
                        <view @click.stop="txnav(item)"
                            style="color: #1ac279;width: 200rpx;height: 56rpx;border-radius: 10rpx;background: rgba(245, 245, 245, 1);line-height: 56rpx;text-align: center;">
                            <u-icon name="map-fill" size="32" color="#1ac279"></u-icon>一键导航</view>
                    </view>
                </view>

                <view style="margin: auto;width: 636rpx;border: 2rpx solid rgba(245, 245, 245, 1);">
                </view>


                <view class="yuyue" v-if="item.category_id == 2">预约车型：{{ item.vehicle_name }}</view>


                <!-- 待勘察 -->
                <view class="prc_box" v-if="subId == 2">
                    <view class="left_trxt_box">已付定金：¥{{ item.first_pay_money }}</view>
					<view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
                    <!-- <view class="czbtn1_box" @click.stop="goinDetail(item, subId)">查看详情</view> -->
                </view>
                <!-- 待清运 -->
                <view class="prc_box" v-if="subId == 3">
                    <view class="left_trxt_box">待结清金额：<text style="color: rgba(255, 141, 26, 1);">¥{{
                            item.last_pay_money
                        }}</text></view>
					<view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
                </view>
                <!-- 已完成 -->
                <view class="prc_box" v-if="subId == 5">
                    <view class="left_trxt_box">订单总金额：¥{{ item.total_money }}</view>
					<view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
                </view>
                <view style="margin: auto;width: 636rpx;border: 2rpx solid rgba(245, 245, 245, 1);">
                </view>
                <!-- 待勘察 -->
                <view class="prc_box" v-if="subId == 2" style="display: flex;justify-content: flex-end;">
                    <view class="czbtn1_box" @click.stop="goinDetail(item, subId)">查看详情</view>
                    <view class="czbtn_box" v-if="item.flag == '0'" @click.stop="fillIn(item)"
                        style="margin-left: 20rpx;">填写勘察信息</view>
                    <view class="czbtn_box" v-else @click.stop="fillIn(item)" style="margin-left: 20rpx;">修改勘察信息</view>
                </view>
                <!-- 待清运 -->
                <view class="prc_box" v-if="subId == 3" style="display: flex;justify-content: flex-end;">
                    <view class="czbtn1_box" @click.stop="goinDetail(item, subId)">查看详情</view>
                </view>
                <!-- 已完成 -->
                <view class="prc_box" v-if="subId == 5" style="display: flex;justify-content: flex-end;">
                    <view class="czbtn1_box" @click.stop="goinDetail(item, subId)">查看详情</view>
                </view>
            </view>
            <aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
                padding="" :loadTitle="loadTitle"></aLoadMore>
        </scroll-view>
        <view v-else>
            <empoy :imageUrl="'https://build.lwjcg.com/uploads/empty_order.png'" :kongtext="'暂无订单'"></empoy>
        </view>
    </view>
</template>
<script>
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        empoy
    },
    data() {
        return {
            loadStatus: 'normal',//加载状态down,loading,normal
            loadTitle: {
                down: "上拉加载更多",
                loading: "正在加载",
                normal: "没有更多了",
            },
            subList: [
                {
                    id: 2,
                    text: '待勘察',
                },
                {
                    id: 3,
                    text: '待清运',
                },
                {
                    id: 5,
                    text: '已完成',
                }
            ],
            subId: 2,//默认选中进行中
            orderList: [],
            survey_id: '',
            page: 1,//分页
            flags: false,//防抖
            mark: '0',
            isBack: true,
        }
    },
    onLoad(options) {
        this.subId = options.subId
        console.log(this.subId, "this.subId")
        this.mark = options.mark
        this.survey_id = options.survey_id
        // uni.$on('subId', function (data) {
        //     this.subId = data
        //     console.log(this.subId, ' this.subId ')
        // })

        this.page = 1
        this.orderList = []
        this.getorderList()
        // this.subId = options.subId
    },
    onShow() {
        if (uni.getStorageSync('xiugai')) {
            this.page = 1
            this.orderList = []
            this.getorderList()
            uni.setStorageSync('xiugai',false)
        }
    },
    methods: {
        goback() {
            uni.navigateBack()
        },
        gohome() {
            uni.switchTab({
                url: '/pages/index/index'
            })
        },
        // 点击导航
        txnav(item) {
            uni.openLocation({
                latitude: item.lat * 1,
                longitude: item.lng * 1,
                address: item.location,
                // scale: ,
                success: function () {
                    console.log('success');
                },
                fail(err) {
                    console.log(err, "errrr")
                }
            });
        },
        lower() {
            if (this.flags) {
                this.getorderList();
            } else {
                this.loadStatus = 'normal'
            }

        },
        subBtn(item) {
            this.subId = item.id
            this.page = 1
            this.orderList = []
            this.getorderList()
        },
        // 查看详情
        // kanDetail(item) {
        //     uni.navigateTo({
        //         url: '/orderPage/institutedetail?order_id=' + item.id + '&admin=' + '1'
        //     })
        // },
        // 待清运/已完成查看详情点击
        goinDetail(item, subId) {
            uni.navigateTo({
                url: '/orderPage/institutedetail?subId=' + subId + '&order_id=' + item.id + '&admin=' + '1'
            })
        },
        // 待勘察填写/修改勘察信息点击
        fillIn(item) {
            uni.navigateTo({
                url: '/orderPage/modify/modify?item=' + JSON.stringify(item) + '&survey_id=' + this.survey_id + '&orderId=' + item.id
            })
        },
        getorderList() {
            let data = {
                status: this.subId,
                survey_id: uni.getStorageSync('survey_id'),
                page: this.page,
            }
            this.loadStatus = 'loading'
            this.$Request.post(this.$api.order.orderList, data).then(res => {
                // this.orderList = res.data.data
                this.loadStatus = 'down'
                if (res.code == 200) {
                    uni.hideLoading()
                    var orderList = res.data.data;
                    this.page++;
                    this.orderList = this.orderList.concat(orderList);
                    if (orderList.length < 20) {
                        this.flags = false
                        this.loadStatus = 'normal'
                    } else {
                        this.flags = true
                    }
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-color: rgba(246, 246, 246, 1);

    .back_big_box {
        width: 750rpx;
        height: 176rpx;
        opacity: 1;
        background-color: #fff;

        .title_icon_box {
            width: 100%;
            height: calc(176rpx - 88rpx);
            position: relative;
            color: black;

            .back_icon {
                position: absolute;
                left: 36rpx;
                top: 20rpx;
                width: 50rpx;
                height: 50rpx;
                line-height: 36rpx;
                color: black;
            }

            .back_title_box {
                text-align: center;
                width: 100%;
                height: 52rpx;
                opacity: 1;
                /** 文本1 */
                font-size: 36rpx;
                font-weight: 600;
                letter-spacing: 0rpx;
                line-height: 80rpx;
                color: black;

            }
        }

    }

    .subsection_box {
        width: 100%;
        height: 92rpx;
        box-sizing: border-box;
        padding: 0 54rpx;
        display: flex;
        justify-content: space-between;
        background-color: rgba(255, 255, 255, 1);
        margin-bottom: 20rpx;

        .sub_text_box {
            height: 92rpx;
            text-align: center;
            font-size: 30rpx;
            font-weight: 400;
            line-height: 92rpx;
            color: rgba(128, 128, 128, 1);


            &.sub_text_boxact {
                font-size: 36rpx;
                font-weight: 700;
                color: rgba(0, 0, 0, 1);
            }

            .wenzi {
                width: 200rpx;
                position: relative;

                &.wenzi_2 {
                    text-align: left;
                }

                &.wenzi_3 {
                    text-align: center;

                }

                &.wenzi_5 {
                    text-align: right;
                }

                .sub_line {
                    position: absolute;
                    width: 76rpx;
                    height: 4rpx;
                    background: rgba(26, 194, 121, 1);
                    bottom: 2rpx;



                    &.sub_line_2 {
                        left: 6%;
                    }

                    &.sub_line_3 {
                        left: 0;
                        right: 0;
                        margin: auto;
                    }

                    &.sub_line_5 {
                        right: 6%;
                    }

                }
            }


        }
    }

    .order_big_box {
        width: 100%;
        height: calc(100vh - 290rpx);

        .dange_order_box {
            width: 700rpx;
            // height: 628rpx;
            border-radius: 26rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            box-sizing: border-box;
            margin-bottom: 20rpx;

            .orderNum_box {
                width: 100%;
                height: 90rpx;
                border-bottom: 2rpx solid rgba(245, 245, 245, 1);
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .left_lv_box {
                    width: 6rpx;
                    height: 22rpx;
                    background: rgba(26, 194, 121, 1);
                    margin-right: 30rpx;

                }

                .zs_order_num_box {
                    height: 90rpx;
                    line-height: 90rpx;
                    font-size: 28rpx;
                    font-weight: 500;
                    color: rgba(0, 0, 0, 1);
                }
            }

            .zc_type_box {
                width: 100%;
                height: 154rpx;
                border-bottom: 2rpx solid rgba(245, 245, 245, 1);
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .le_box {
                    width: 50%;
                    height: 88rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    box-sizing: border-box;
                    padding-left: 34rpx;

                    .cc_box {
                        width: 88rpx;
                        height: 88rpx;
                        border-radius: 50%;
                        background-color: #e8fcee;
                        margin-right: 22rpx;

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }

                    .xx_box {
                        height: 88rpx;

                        .xx_top_box {
                            width: 180rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            height: 40rpx;
                            line-height: 40rpx;
                            font-size: 28rpx;
                            // font-weight: 500;
                            line-height: 40rpx;
                        }

                        .xx_bot_box {
                            height: 40rpx;
                            line-height: 40rpx;
                            font-size: 28rpx;
                            // font-weight: 500;
                            line-height: 40rpx;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                        }
                    }
                }

                .r_box {

                    width: 50%;
                    height: 88rpx;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .daishu_box {
                        height: 88rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 88rpx;
                        color: rgba(0, 0, 0, 1);
                    }

                    .yg_box {
                        height: 88rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 92rpx;
                        color: rgba(0, 0, 0, 1);
                    }
                }
            }

            .zclx_box {
                width: 100%;
                height: 204rpx;
                box-sizing: border-box;
                padding-left: 36rpx;
                padding-top: 32rpx;

                .xing_box {
                    height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 40rpx;
                    color: rgba(0, 0, 0, 1);
                    margin-bottom: 16rpx;
                }

                .dizhi_box {
                    width: 100%;
                    height: 40rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .jt_box {
                        width: 350rpx;
                        margin-left: 10rpx;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                    }
                }
            }

            .yuyue {
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                box-sizing: border-box;
                padding-left: 34rpx;
                font-size: 28rpx;
                // font-weight: 500;
                color: rgba(0, 0, 0, 1);
                border-bottom: 2rpx solid rgba(245, 245, 245, 1);
            }

            .prc_box {
                width: 100%;
                height: 100rpx;
                box-sizing: border-box;
                padding: 0 24rpx 0 32rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left_trxt_box {
                    height: 100rpx;
                    line-height: 100rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 1);
                }
                .left_trxt1_box {
                    height: 100rpx;
                    line-height: 100rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 1);
                    margin-right: 50rpx;
                }

                // .right_text_box {
                //     display: flex;
                //     justify-content: flex-end;
                //     align-items: center;

                .czbtn_box {
                    width: 220rpx;
                    height: 56rpx;
                    border-radius: 12rpx;
                    border: 2rpx solid rgba(26, 194, 121, 1);
                    text-align: center;
                    line-height: 56rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(26, 194, 121, 1);
                }

                .czbtn1_box {
                    width: 168rpx;
                    height: 56rpx;
                    border-radius: 12rpx;
                    border: 2rpx solid rgba(26, 194, 121, 1);
                    text-align: center;
                    line-height: 56rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(26, 194, 121, 1);


                }



            }

        }
    }
}
</style>